<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>作用域插槽</title>  
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>  
<body>  
    <div id="app">  
		<todolist v-bind:todos="todos">
		  <template slot-scope="{ todoX }">
			<span v-if="todoX.isComplete">√</span>
			<span v-else>×</span>
			{{ todoX.text }}
		  </template>
		</todolist> 
    </div>  
    <script type="text/javascript">  
        Vue.component('todolist',{  
            template:`
				<ul>
				  <li
					v-for="todo in todos"
				  >
					<slot v-bind:todoX="todo">
					  {{ todo.text }}		// todoX.text 报错！
					</slot>
				  </li>
				</ul>
			`,  
            props:['todos']  
        })  
        new Vue({  
            el:"#app",  
            data:{  
                todos:[  
					{id:1,text:"买衣架",isComplete:0},
					{id:2,text:"买铁夹子",isComplete:1},
					{id:3,text:"买花生米",isComplete:0},
					{id:4,text:"买卷纸",isComplete:1},
					{id:5,text:"买菜",isComplete:1}
                ]  
            }  
        })  
    </script>  
</body>  
</html>  